<template>
  <div>
    <div class="ba_f outmain">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="评价管理" name="evaluate"></el-tab-pane>
        <el-tab-pane label="评价标签" name="evaluatelabel"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>评价统计</span>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20 wid">
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div style="height: 97px">
              <p class="color_9 fon_14">总体评分</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ zhData.average || 0 }}<span class="fnormal fon_16 mar_l5">分</span>
              </p>
              <el-rate
                  v-if="zhData.average>0"
                  v-model.number="zhData.average"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}">
              </el-rate>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div style="height: 97px">
              <p class="color_9 fon_14">好评统计</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ zhData.good || 0 }}</p>
              <el-rate
                  v-if="zhData.goodStar>0"
                  v-model.number="zhData.goodStar"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}">
              </el-rate>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div style="height: 97px">
              <p class="color_9 fon_14">中评统计</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ zhData.middle || 0 }}</p>
              <el-rate
                  v-if="zhData.middleStar>0"
                  v-model.number="zhData.middleStar"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}">
              </el-rate>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div style="height: 97px">
              <p class="color_9 fon_14">差评统计</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ zhData.difference || 0 }}</p>
              <el-rate
                  v-if="zhData.differenceStar>0"
                  v-model.number="zhData.differenceStar"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}">
              </el-rate>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="outmain ba_f mar_t20">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>评价列表</span>
        </div>
      </div>
      <div class="">
        <el-form :inline="false" :model="formInline" class="demo-form-inline" label-width="100px">
          <el-form-item label="评价类型：" class="mar_t20">
            <el-radio-group v-model="formInline.star" @change="selectType">
              <el-radio-button label="0">不限</el-radio-button>
              <el-radio-button label="1">好评</el-radio-button>
              <el-radio-button label="2">中评</el-radio-button>
              <el-radio-button label="3">差评</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="评价日期：" class="mar_t20">
            <div class="flex-bet">
              <div>
                <el-radio-group v-model="formInline.timeType" @change="selectType">
                  <el-radio-button label="">不限</el-radio-button>
                  <el-radio-button label="1">今天</el-radio-button>
                  <el-radio-button label="2">近七天</el-radio-button>
                  <el-radio-button label="3">近十五天</el-radio-button>
                  <el-radio-button label="4">自定义时间</el-radio-button>
                </el-radio-group>
                <span class="mar_l20" v-if="formInline.timeType=='4'">
                <el-date-picker v-model="formInline.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" format="yyyy年MM月dd日" :picker-options="pickerOptions"
                                @change="selectType"></el-date-picker>
              </span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="模糊搜索：" label-position="top" class="mar_t20">
            <div class="flex">
              <div>
                <el-input type="text" v-model="formInline.keyword" style="width: 500px;"
                          placeholder="请输入评价相关的订单号/手机号/用户昵称" @input="selectType"></el-input>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <el-table
          :data="list"
          v-loading="listLoading"
          :element-loading-text="elementLoadingText"
          style="width: 100%"
          class="mar_t20">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column label="评分" width="300">
          <template slot-scope="scope">
            <div class="flex flex-y-top">
              <div class>
                <img class="goodlogo bor_rad50" :src="scope.row.portrait"/>
              </div>
              <div class="mar_l10">
                <div class="flex">
                  <div class>{{ scope.row.userName }}</div>
                  <el-tag size="mini" type="info" class="mar_l5">（ID:{{ scope.row.userId }}）</el-tag>
                </div>
                <div class="mar_t5">
                  <el-rate
                      v-model.number="scope.row.star"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}">
                  </el-rate>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="评价内容" width='400'>
          <template slot-scope="scope">
            <div class="t_l">
              <div class="hydlnr_2">
                {{ scope.row.body }}
              </div>
              <div v-if="scope.row.media" class="flex mar_t10">
                <div v-for="(item,i) in scope.row.media" :key="i">
                  <img class="goodlogo bor_rad5" :src="item"/>
                </div>
              </div>
              <!--            <span @click="ckxq(scope.row.id)">查看更多</span>-->
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="评价时间"></el-table-column>
        <el-table-column prop="reply" label="商家回复"></el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.state=='1'">
              <el-tag size="mini">待审核</el-tag>
            </div>
            <div v-if="scope.row.state=='2'">
              <el-tag size="mini" type="success">已通过</el-tag>
            </div>
            <div v-if="scope.row.state=='3'">
              <el-tag size="mini" type="danger">已拒绝</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="操作" width='280'>
          <template slot-scope="scope">
            <el-button v-if="scope.row.state=='2'" @click="dialogFormReply(scope.row.id)" type="text" size="small">回复
            </el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
            <el-button type="text" size="small" @click="handleDelete2(scope.row)">评价详情</el-button>
            <el-dropdown class="more" v-if="scope.row.state!='2'">
              <el-button type="primary" size="mini" class="mar_l10">
                审核<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><span @click="examine(scope.row.id,1)">通过</span></el-dropdown-item>
                <el-dropdown-item><span @click="examine(scope.row.id,2)">拒绝</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          :current-page.sync='page.currentPage'
          @current-change="handleCurrentChange">
      </el-pagination>
      <el-dialog title="编辑回复" :visible.sync="dialogFormVisible" width="600px">
        <el-form :model="form" label-width="120px">
          <el-form-item label="输入回复内容">
            <el-input v-model="form.reply" auto-complete="off" :rows="4" type='textarea'></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogform(form)">确 定</el-button>
        </div>
      </el-dialog>
      <edit ref="edit" @fetchData="fetchData"></edit>
      <!--    <el-dialog title="评论详情" :visible.sync="dialogFormVisible2" class="plxq">-->
      <!--      <el-form :model="form2">-->
      <!--        <el-form-item label="详情内容" :label-width="formLabelWidth2">-->
      <!--          <div v-html="form2.body"></div>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item v-show="this.form2.media" label="图片" :label-width="formLabelWidth2">-->
      <!--        <span v-for="(item,i) in this.form2.media" class="mar_r15">-->
      <!--          <img :src="item" style="width: 200px;height: 100%;">-->
      <!--        </span>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item v-show="this.form2.msg!=0" label="标签" :label-width="formLabelWidth2">-->
      <!--        <span v-for="(item,i) in this.form2.msg" class="mar_r15">-->
      <!--          <el-tag type="success">{{item}}</el-tag>-->
      <!--        </span>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="商品名称" :label-width="formLabelWidth2">-->
      <!--          <div v-html="form2.goods"></div>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="订单号" :label-width="formLabelWidth2">-->
      <!--          <div v-html="form2.outTradeNo"></div>-->
      <!--        </el-form-item>-->
      <!--      </el-form>-->
      <!--      <div slot="footer" class="dialog-footer">-->
      <!--        <el-button @click="dialogFormVisible2 = false">取 消</el-button>-->
      <!--        <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>-->
      <!--      </div>-->
      <!--    </el-dialog>-->
    </div>
  </div>
</template>
<script>
import {commentList, modifyComment, changeComment, commentReply} from "@/api/good";
import {changeDate} from "@/utils";
import Edit from "./components/edit";

export default {
  components: {Edit},
  created() {
    this.fetchData();
  },
  data() {
    return {
      activeName: 'evaluate',
      list: [],
      listLoading: false,
      selectRows: "",
      elementLoadingText: "正在加载...",
      page: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      form: {
        reply: '',
      },
      selectData: '',
      pickerOptions: {
        onPick: ({maxDate, minDate}) => {
          this.selectData = minDate.getTime()
          if (maxDate) {
            this.selectData = ''
          }
        },
        disabledDate: (time) => {
          if (!this.isNull(this.selectData)) {
            var date = new Date(this.selectData)
            return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
          } else {
            return false
          }
        }
      },
      formInline: {
        time: [new Date(), new Date()],
        timeType: '',
        keyword: '',
        star: '0',
      },
      zhData: {},
      pinfen: '3.5',
    }
  },
  methods: {
    handleClick() {
      if (this.activeName == 'evaluate') {
        this.$router.push({path: 'evaluate'});
      } else if (this.activeName == 'evaluatelabel') {
        this.$router.push({path: 'evaluatelabel'});
      }
    },
    async fetchData() {
      var params = {
        page: this.page.currentPage,
        timeType: this.formInline.timeType,
        star: this.formInline.star,
        startTime: this.formInline.timeType == '2' && this.formInline.time ? changeDate(this.formInline.time[0]) : '',
        endTime: this.formInline.timeType == '2' && this.formInline.time ? changeDate(this.formInline.time[1]) : '',
        keyword: this.formInline.keyword,
        storeId: '',
      };
      this.listLoading = true;
      const {data, count} = await commentList(params);
      this.list = data.list;
      if (this.list) {
        for (let i = 0; i < this.list.length; i++) {
          this.list[i].star = +this.list[i].star
        }
      }
      this.zhData = data
      this.zhData.differenceStar = data.differenceStar ? +data.differenceStar : 0
      this.zhData.goodStar = data.goodStar ? +data.goodStar : 0
      this.zhData.middleStar = data.middleStar ? +data.middleStar : 0
      this.zhData.average = data.average ? +data.average : 0
      this.page.total = count;
      this.listLoading = false;
    },
    selectType() {
      this.fetchData();
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    async dialogform(form) {
      const {msg} = await modifyComment({id: form.id, reply: form.reply, type: 3});
      this.$baseMessage(msg, "success");
      this.dialogFormVisible = false
      this.fetchData();
    },
    async examine(id, type) {
      const {msg} = await modifyComment({id, type,});
      this.$baseMessage(msg, "success");
      this.fetchData();
    },
    handleEdit(row) {
      if (row.id) {
        this.$refs["edit"].showEdit(row);
      } else {
        this.$refs["edit"].showEdit();
      }
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm("你确定要删除当前项吗", null, async () => {
          const {msg} = await modifyComment({id: row.id, type: 4});
          this.$baseMessage(msg, "success");
          this.fetchData();
        });
      } else {
        if (this.selectRows.length > 0) {
          const id = this.selectRows.map((item) => item.id);
          this.$baseConfirm("你确定要删除选中项吗", null, async () => {
            const {msg} = await modifyComment({id, type: 4});
            this.$baseMessage(msg, "success");
            this.fetchData();
          });
        } else {
          this.$baseMessage("未选中任何行", "error");
          return false;
        }
      }
    },
    handleDelete2(row) {
      if (row.id) {
        this.$refs["edit"].showEdit(row);
      }
    },
    isNull(value) {
      if (value) {
        return false
      }
      return true
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    dialogFormReply(id) {
      this.dialogFormVisible = true;
      this.form.id = id
    },
  }
}
</script>
